import React, {FC, useState} from 'react';
import Row from "./components/Row";
import Column from "./components/Column";
import Flex from "./components/Flex";
import Header from "./components/Header";
import Title from "./components/Title";
import Description from "./components/Description";


const widgets: { [key: string]: FC<any> } = {
  Flex, Row, Column, Title, Header, Description,
}

const SelectWidget = ({ data, children }: any) => {
  const $$customise: any = {};
  if (data.customises?.length) {
    data.customises.forEach((item: any, index: number) => {
      // console.log('Playground.customises: => ', item.name);
      $$customise[item.name] = (props: any) => <SelectWidget {...props} data={item} />
    })
  }

  const CustomComp = widgets[data.name]
  // console.log('Playground.customises: => ', data.name)
  if (CustomComp) {
    const props = data.defaultProps || {}
    return (
      <CustomComp {...props} $$customise={$$customise}>
        { children }
      </CustomComp>
    )
  } else return null
}

let Playground = (props: any) => {
  return (
    <div className="playground">
      <SelectWidget {...props} />
    </div>
  )
}


export default Playground;
